<template>
  <div class="base-panels">
    <h2 class="title2">施工许可信息 </h2>
    <table class="show-table">
      <colgroup>
        <col width="136">
        <col width="275">
        <col width="136">
        <col width="275">
      </colgroup>
      <tr>
        <td class="key">许可工程名称</td>
        <td>{{detail?.xkgcName}}</td>
        <td class="key">施工许可证编号</td>
        <td>{{detail?.sgxkNewCode}}</td>
      </tr>

      <tr>
        <td class="key">计划开工日期</td>
        <td>{{ parseTime(detail?.xkgcSdate) }}</td>
        <td class="key">计划竣工日期</td>
        <td>{{ parseTime(detail?.xkgcEdate) }}</td>
      </tr>
      <tr>
        <td class="key">合同金额（万元）</td>
        <td>{{detail?.xkgcHtj}}</td>
        <td class="key">总面积/长度</td>
        <td>{{detail?.xkgcSgzmj}} {{detail?.unit}}</td>
      </tr>

      <tr>
        <td class="key">建设规模</td>
        <td colspan="3">{{ detail?.sgxkRemark }}</td>
      </tr>
      <tr>
        <td class="key">发证机关</td>
        <td>{{detail?.sgxkFzUnitName}}</td>
        <td class="key">发证日期</td>
        <td>{{ parseTime(detail?.sgxkFzDate) }}</td>
      </tr>



    </table>

    <h2 class="title2">参建单位及人员 </h2>

    <Table
        :columns="config.columns"
        :row-key="(record,index) => index"
        :data-source="config.list"
        :loading="config.loading"
        :pagination=config.page
        bordered
    >
      <template #indexSlot="{ index }">{{(config.page.current-1)*10+index+1}}</template>
      <template #staffName="{ text, record }">
        <router-link target="_blank" :to="{ path: `/staff/${record.staffId}` }" class="blue" >
          {{ text }}
        </router-link>
      </template>
      <template #companyName="{ text, record }">
        <router-link target="_blank" :to="{ path: `/company/${record.unitId}` }" class="blue" >
          {{ text }}
        </router-link>
      </template>
    </Table>
  </div>

</template>

<script lang="ts">
interface BaseModel {
  sgxkFzDate?:number ;//	发证日期	string(date-time)
  sgxkFzUnitName?:string ;//	发证机关	string
  sgxkId?:string ;//	施工许可id	string
  sgxkNewCode?:string ;//	施工许可证编号	string
  sgxkRemark?:string ;//	建设规模	string
  unit?:string ;//	单位(米/平方米)	string
  xkgcEdate?:string ;//	计划竣工日期	string(date-time)
  xkgcHtj?:number ;//	合同金额	number(double)
  xkgcName?:string ;//	工程名称	string
  xkgcSdate?:string ;//	计划开工日期	string(date-time)
  xkgcSgzmj?:number ;//	面积/长度
}

import {defineComponent, inject, onMounted,reactive, ref, toRefs} from 'vue';
import { parseTime } from '/@/utils';
import { Table } from 'ant-design-vue';
import { getSinglePermitApi , getSinglePermitCorpApi } from "/@/api/single";
const columns = [
  { title: '序号', dataIndex: 'index', width: 70, align: 'center', slots: ({ customRender: 'indexSlot' }) },
  { title: '参建类型', dataIndex: 'unitTypeName',width: 150},
  { title: '企业名称', dataIndex: 'unitName',width: 350, slots: ({ customRender: 'companyName' })},
  { title: '承揽资质', dataIndex: 'unitAptName',width: 220},
  { title: '参建人员角色', dataIndex: 'staffRoleName'},
  { title: '姓名', dataIndex: 'staffName', slots: ({ customRender: 'staffName' })},
]
export default defineComponent({
  components: { Table  },
  setup() {
    const singleId = inject('singleId') as string;
    const detail = ref<BaseModel>({});
    const config = reactive({
      columns: columns,
      list: [],
      page:{
        current:1,
        pageSize:100,
        total:0
      },
      loading: false
    })

    const changeHandler =  sgxkId  => {
      let { loading ,list } = toRefs(config);
      loading.value = true;
      getSinglePermitCorpApi({ sgxkId } ).then(({data ,success}) => {
        loading.value = false;
        if(success)list.value = data;
      })
    }

    const getPermit = async() => {
      let { data , success } = await getSinglePermitApi({singleId});
      success ? detail.value=data : console.log ('接口返回错误');
      if(data)changeHandler( data.sgxkId );  //data.sgxkId 0jg7e-hqrhd0-05qhq
    }

    const init = () => {
      getPermit();
    }

    onMounted(init);
    return {
       parseTime , detail , config
    }
  },
})
</script>

<style lang="less" scoped>
.base-panels{
  padding: 0 20px 50px;
}

.title2{
  padding: 20px 0 5px;
}

.show-table{
  width: 100%;
  border: 1px solid #f0f0f0;

  tr{
    td{
      height: 50px;
      padding: 5px 15px;
      vertical-align: center;
      border: 1px solid #EAEAEA;

      &.key{
        background: #F3F3F3;
      }

    }
  }
}

</style>
